<template>
  <transition name="bouncess">
    <div class="content" :style="contentStyle">
      <div class="container" :style="wordItemContainer" v-if="wordItems[lineWordIndex]">
        <div class="item"
             v-for="(wordItem,index) in wordItems[lineWordIndex]" :key="index"
             :style="wordItemStyle(wordItem)"
             @touchend="poemRead(index,wordItem)"
        >
          {{wordItem.text}}
          <audio type="audio/mpeg" :src="audioUrl(index)" :ref="'wordAudio' + index"></audio>
        </div>
      </div>
      <div class="poem-item"  v-if="wordItems[lineWordIndex]">
        <div v-for="(wordItem,index) in wordItems[lineWordIndex]" :key="index"
             class="word-img" :style="wordStyle(wordItem)"
        >  {{wordItem.text}} </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import { mapActions, mapGetters } from "vuex"
  // eslint-disable-next-line no-unused-vars
  const $ = window.$
  export default {
    props: ["index", 'line','picbookIndex',"contentItem","isReset","lineLength"],
    data() {
      return {
        current: 0,
        lineWordIndex: 0,
        timer: null,
        time: 0,
        wordItemDate: [],
        wordItems: []
      }
    },
    created() {
      // //假数据
      // const pushItem = [[...this.line]]
      //  初始化
      const lineWordGroup = this.line.split("，")       //逗号分隔
      const pushItem = lineWordGroup.map((item,index) =>{
        const optionItem =[...item]
        if(index % 2 === 0) optionItem.push("，")      //再加上逗号
        return optionItem
      })
      this.wordItems = pushItem.map(item => {       //变成独立对象
        const options =[...item]
        for (const index in options) {
          options[index] = {
            text: options[index],
            active: false,
            activeDate: null,
          }
        }
        return options
      })
      this.wordItems.forEach(item =>{
        this.$set(item[0],'activeWord',true)   //默认显示第一个字
      })


    },
    computed: {
      wordItemContainer() {
        const width = this.wordItems[this.lineWordIndex].length * 4 - 2
        return {
          width: width + "rem",
          marginLeft: - width / 2 + "rem",
        }
      },
      //内容页样式--背景图
      contentStyle() {
        return {
          background: "url(" + this.contentItem[this.index].bgImg + ") 0 0/100% 100%"
        }
      },
      wordItemStyle(wordItem){
        return function (wordItem) {
          return{
            color: wordItem.active ? 'rgb(252,136,90)' : this.picbookIndex.id === 71 ? 'rgb(129,49,18)' : 'rgba(0,0,0,0.8)',
            transform: wordItem.active ? 'scale(1.3)' : '',
            transition: 'all 0.5s',
            width: wordItem.text === '，' || wordItem.text === '。' ? '2rem' : '4rem',
          }
        }
      },
      wordStyle(wordItem){
        return function (wordItem) {
          return{
            opacity: wordItem.active || wordItem.activeWord ? 1 : 0,
            transition: 'all 0.5s'
          }
        }
      },

      //音频效果
      audioUrl(index) {
        return function (index) {
          if(this.wordItems[this.lineWordIndex][index].text === '，'|| this.wordItems[this.lineWordIndex][index].text === '。') {
            return
          } else {
            //逗号后面  假数据
            // for(let i = 0; i < this.wordItems[this.lineWordIndex].length; i++){
            //   if(index > i && index < this.wordItems[this.lineWordIndex].length){
            //     if(this.wordItems[this.lineWordIndex][index-i].text === '，'){
            //       index--
            //     }
            //   }
            // }

            if (this.lineWordIndex > 0) {
              /*后半句*/
              index+=this.line.split('，')[this.lineWordIndex-1].length
            }
            //下一句
            for(let i = 0; i < this.index; i++){
              index+=this.words[i].replace(/，/g,"").replace(/。/g,"").length
            }
            return this.poem.wordAudioUrlPrefix + this.poem.wordAudioFileNames[index]
              }

          }
      },
      ...mapGetters("poemStatus", {
        poemBeatSeconds: "gerPoemBeatSeconds",
        poem: "getPoem"
      }),
      ...mapGetters("wordStatus", {
        words: 'getWord'
      })
    },
    methods: {
      poemRead: function (index, wordItem) {
        if(wordItem.text === '，' || wordItem.text === '。'){
          return
        }
        if (index === this.current) {
          if(index === 0){
            if(this.lineWordIndex === 0) this.time = 0
            this.timer = setInterval(() => { this.time = this.time + 10 }, 10)
          }
          this.wordItemDate.push(this.time)

          const wordAudio = 'wordAudio' + (this.current),
                  wordAudios = 'wordAudio' + (this.current - 1)
          if (index > 0) {
            for (let i = 1; i < 3; i = i + 0.1) {
              setTimeout(() => { this.$refs[wordAudios][0].playbackRate = i }, 50)
            }
          }
          setTimeout(() => {
            this.$refs[wordAudio][0].play()
          }, 0)
          this.$set(wordItem, 'active', true)
          this.$set(this.wordItems[this.lineWordIndex][0],'activeWord',false)   //点击之后将一个的默认显示属性关闭
          if (index > 0) {
            this.$set(this.wordItems[this.lineWordIndex][index - 1], 'active', false)   //将上一个字隐藏
          }
          this.current++
        // //  假数据
        // //  逗号后面的数据读取
        //   if(index < this.wordItems[this.lineWordIndex].length-1){
        //     const nextWord = this.wordItems[this.lineWordIndex][index + 1]
        //     if(nextWord.text === '，' ){
        //       setTimeout(()=>{
        //         index++
        //         this.current++
        //         this.wordItems[this.lineWordIndex].forEach(item =>{
        //           this.$set(item, 'active', false)   //将所有字关闭
        //         })
        //         this.$set(this.wordItems[this.lineWordIndex][index], 'active', true)
        //       },1000)
        //     }
        //   }
        //
        //   // 下一页
        //   if (index === this.lineLength[this.index]-1) {
        //     setTimeout(() => {
        //       window.clearInterval(this.timer)
        //       this.$emit('poemNextPage')
        //       this.lineWordIndex = 0          //下一页后从第一句开始
        //       this.poemBeatSeconds[this.index] = this.wordItemDate
        //       this.setPoemBeatSeconds(this.poemBeatSeconds)
        //     }, 500)
        //     //读完该绘本  进入最后一页
        //     if (this.index === this.contentItem.length - 1) {
        //       this.$emit('updateIsSwiper')
        //     }
        //   }


          //换下一句  普通绘本
          if (index === this.line.split('，')[this.lineWordIndex].length-1) {
            //后半句
            setTimeout(() => {
              this.lineWordIndex++
            }, 500)
            this.current = 0
          }
          //下一页
          if (this.lineWordIndex === this.wordItems.length-1 && index === this.wordItems[this.lineWordIndex].length-2) {
            setTimeout(() => {
              window.clearInterval(this.timer)
              this.$emit('poemNextPage')
              this.lineWordIndex = 0          //下一页后从第一句开始
              this.poemBeatSeconds[this.index] = this.wordItemDate
              this.setPoemBeatSeconds(this.poemBeatSeconds)
            }, 1000)
            //读完该绘本  进入最后一页
            if (this.index === this.contentItem.length - 1) {
              this.$emit('updateIsSwiper')
            }
          }
        }
      },
      ...mapActions("poemStatus", ["setPoemBeatSeconds"])
    },
    watch:{
      isReset: function () {
        if(this.isReset){
          this.current = 0
          this.time = 0
          this.timer = null
          this.wordItemDate = []
          this.wordItems.forEach(lineWord =>{
            lineWord.forEach(item =>{
              this.$set(lineWord[0],'activeWord',true)   //默认显示第一个字
              this.$set(item,'active',false)
              this.$set(item,'activeDate',null)
            })
          })
        }
      }
    }
  };
</script>

<style scoped lang = 'stylus'>
  @import '../../../common/stylus/content.styl'
  .poem-item
    position absolute
    $center('WHLT', 5rem, 5rem)
    margin-top -1rem
    background url($urlTitle + 'poem/大字背景.png') 0 0 / 100% 100%
    overflow hidden
    .word-img
      position absolute
      $center('WHLT', 4rem, 4rem)
      font-size 3rem
      text-align center
      line-height 4rem
      color white
      text-shadow: -2px 0 rgb(252,136,90), 0 2px rgb(252,136,90), 2px 0 rgb(252,136,90), 0 -2px rgb(252,136,90)
  .container
    position absolute
    $center('WHLT', 18rem, 4rem)
    top 74%
    display flex
    align-items center
    justify-content left
    .item
      width 4rem
      height 4rem
      font-size 2.8rem
      text-align center
      line-height 4rem
      text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff
</style>
